<template>
  <view v-if="show_flag">
    <view style="width: 100%;height: 480upx;position: relative;">
      <view style="height: 480upx;">
        <video id="myVideo" :src="video_tutorial.video_url" autoplay :show-play-btn="true" :controls="true"
               objectFit="cover" style="width: 100%; height: 100%;" v-if="is_look" :initial-time="last_view_time"
               @timeupdate="getVideoSchedule" @ended="playEnd"></video>
        <image :src="video_tutorial.video_url+'?vframe/jpg/offset/1'" style="width: 100%; height: 100%;"
               @click="handlePlayVideo()" v-else></image>
        <view v-if="!is_buy && !video_tutorial.is_free"
              style="width: 100%; height: 100%; background: rgba(55,55,55,0.70); position: absolute; top: 0;left: 0; z-index: 10;">
          <view class="look-no flex flex-direction">
            <view class="look-no-text">此课程属于收费课程 拜师购买后即可观看</view>
            <view class="look-no-buttom flex align-center justify-center" @click="pay_flag = true">拜师学习</view>
          </view>
        </view>
      </view>
      <view style="width: 40upx;height: 40upx;border-radius: 50%;position: absolute;right: 20upx;bottom: 20upx;">
        <image style="width: 100%;height: 100%;border-radius: 50%;" src="/static/icon/detail/bofang@2x.png"></image>
      </view>
    </view>
    <view class="flex align-center">
      <scroll-view scroll-x class="bg-white nav">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :class="index===is_tab?'select-cur cur':''" v-for="(item,index) in tab_list"
                :key="index" :data-id="index" @click="handleChangeTab(index, item.id)">
            <view v-if="index === 1" class="flex align-center justify-center apprentice">
              <image src="/static/icon/tutorials/xuexi@2x.png" alt=""
                     style="width: 40upx; height: 32upx; margin-right: 8upx;"></image>
              <view style="font-size: 28upx; color: white;">我要拜师</view>
            </view>
            <view v-else>{{ item }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="content" :style="is_tab !== 0?'padding-bottom: 60upx;':''">
      <view v-if="is_tab === 0" class="content-box">
        <view
            style="background-color: white; border-radius: 10upx; height: calc(100vh - 696upx); padding: 16upx 28upx 0 28upx; font-weight: normal;">
          <view @click="handleChangeFirstLevel(index, item.id)" class="chapter" v-for="(item,index) in chapter_list"
                :key="index">
<!--            <view v-if="item.type === 'single'" @click.stop="handleChangeContent(item.id, index, item.name)">-->
<!--              <view class="flex justify-between align-center"-->
<!--                    style="width: 100%; height: 70upx; color: #666666; border-bottom: 1px solid #F8F8F8; font-weight: normal;">-->
<!--                <view>{{ index + 1 }}.{{ item.name }}-->
<!--                  <image v-if="video_tutorial_id === item.id" src="/static/icon/tutorials/PCbofangye_paihangbang@2x.png" alt=""-->
<!--                         style="width: 26upx; height: 28upx; margin-left: 10upx;"></image>-->
<!--                </view>-->
<!--                <view>{{ item.video_time }}</view>-->
<!--                <view v-if="item.is_free" class="flex justify-between"-->
<!--                      style="width: 96upx; font-size: 24upx; color: #E52718;">-->
<!--                  <view>免</view>-->
<!--                  <view>费</view>-->
<!--                </view>-->
<!--                <view v-if="!item.is_free && !item.view_status" class="flex justify-between"-->
<!--                      style="width: 96upx; font-size: 24upx; color: #999999;letter-spacing:4upx;">-->
<!--                  <view>未观看</view>-->
<!--                </view>-->
<!--                <view v-if="!item.is_free && item.view_status === 1" class="flex justify-between"-->
<!--                      style="width: 96upx; font-size: 24upx; color: #E52718;letter-spacing:4upx;">-->
<!--                  <view>已观看</view>-->
<!--                </view>-->
<!--                <view v-if="!item.is_free && item.view_status === 2" class="flex justify-between"-->
<!--                      style="width: 96upx; font-size: 24upx; color: #E52718;">-->
<!--                  <view>上次观看</view>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
            <view>
              <view class="flex align-center justify-between">
                <text style="width: 90%;">{{ item.name }}</text>
                <view class="flex align-center justify-center"
                      :style="item.is_show?'width:26upx;height: 18upx;':'width:22upx;height: 32upx;'">
						  <image style="width: 100%;height: 100%;"
						         :src="item.is_show?'/static/icon/tutorials/fanhui-2@2x.png':'/static/icon/icon_more@2x.png'"
						         mode=""></image>
                </view>
              </view>
              <view v-if="item.is_show" @click.stop="handleChangeContent(second_item.id, second_index, second_item.name)"
                    class="second_level flex align-center justify-between"
                    v-for="(second_item,second_index) in item.sub_video_tutorials" :key="second_index">
                <view class="flex flex-direction"
                      style="width: 100%; font-weight: normal;">
                  <view>
                    {{ index + 1 }}.{{ second_item.name }}
                    <span v-if="video_tutorial_id === second_item.id"><image
                        src="/static/icon/tutorials/PCbofangye_paihangbang@2x.png" alt=""
                        style="width: 26upx; height: 28upx; margin-left: 10upx;"></image></span>
                  </view>
				  <view class="flex justify-between" style="padding: 10upx 0;">
					  <view>{{ second_item.video_time }}</view>
					  <view v-if="second_item.is_free" class="flex justify-between"
					        style="width: 96upx; font-size: 24upx; color: #E52718;">
					    <view>免</view>
					    <view>费</view>
					  </view>
					  <view v-if="!second_item.is_free && !second_item.view_status" class="flex justify-between"
					        style="width: 96upx; font-size: 24upx; color: #999999;letter-spacing:4upx;">
					    <view>未观看</view>
					  </view>
					  <view v-if="!second_item.is_free && second_item.view_status === 1" class="flex justify-between"
					        style="width: 96upx; font-size: 24upx; color: #E52718;letter-spacing:4upx;">
					    <view>已观看</view>
					  </view>
					  <view v-if="!second_item.is_free && second_item.view_status === 2" class="flex justify-between"
					        style="width: 96upx; font-size: 24upx; color: #E52718;">
					    <view>上次观看</view>
					  </view>
				  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="is_tab === 1" class="record-4">
        <view class="flex-direction content-box  align-center" style="width: 100%; background-color: white;">
          <view class="flex justify-center" style="margin-bottom: 10upx;">
            <image :src="master_information.user && master_information.user.avatar" mode="aspectFill"
                   style="width: 120upx; height: 120upx; border-radius: 50%;"></image>
          </view>
          <view class="flex justify-center" style="font-size: 24upx; color: #666666;">
            {{ master_information.user && master_information.user.nick_name }}
          </view>
          <view class="flex justify-center" style="font-size: 26upx; color: #999999; margin: 30upx 0;">师父介绍</view>
          <view  style="color: #666666; font-size: 26upx;"
                v-html="master_information.information_html"></view>
          <view class="flex justify-center" style="font-size: 26upx; color: #999999; margin: 30upx 0;">服务内容</view>
          <view style="color: #666666; font-size: 26upx;"
                v-html="master_information.service_html"></view>
          <view class="flex justify-center" style="font-size: 26upx; color: #999999; margin: 30upx 0;">联系方式</view>
          <view class="flex justify-center" style="color: #666666; font-size: 26upx;">
            {{ master_information.user && master_information.user.phonenum }}
          </view>
        </view>
      </view>
      <view v-if="is_tab === 2" class="content-box">
        <view style="border-radius: 10upx; padding: 16upx 28upx 0 28upx; background-color: white;">
          <view class="evaluate-content flex"
                :style="index !== evaluate_list.length-1?'border-bottom:1px solid rgba(0,0,0,0.05)':''"
                v-for="(item, index) in evaluate_list" :key="index">
            <view style="width: 68upx;height: 68upx;border-radius: 50%;">
              <image style="width: 100%;height: 100%;border-radius: 50%;" :src="item.user && item.user.avatar"
                     mode="aspectFill"></image>
            </view>
            <view class="evaluate-content-right">
              <view class="evaluate-right-top flex align-center justify-between">
                <view>
                  <view style="font-size: 22upx;">{{ item.user && item.user.nick_name }}</view>
                  <view style="font-size: 22upx;color: rgba(153,153,153,1);margin-top: 4upx;">{{
                      item.created_at
                    }}
                  </view>
                </view>
              </view>
              <view style="font-size: 26upx;margin-top: 26upx;">{{ item.content_html }}</view>
              <view class="flex align-center flex-wrap">
                <view v-for="(img_item, img_index) in item.imgs_arr" :key="img_index" @click="handlePreviewImgs(img_item, item.imgs_arr)"
                      style="width: 192upx;height: 164upx; padding: 10upx 10upx; margin-bottom: 20upx;"
                      mode="">
                  <image :src="img_item" style="width: 192upx;height: 164upx; border-radius: 10upx;"></image>
                </view>
              </view>
            </view>
          </view>
          <view v-if="!evaluate_list.length" class="justify-center align-center"
                style="padding: 180upx 0; flex-direction: column; text-align: center;">
            <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
            <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
          </view>
        </view>
        <!--占位-->
        <view style="width: 100%; height: 98upx;"></view>
      </view>
      <view v-if="is_tab === 3" class="record-4">
        <view class="flex-direction content-box  align-center" style="width: 100%; background-color: white;">
          <view v-if="is_buy">
            <textarea placeholder-style="color:#666666;" placeholder="请输入..." v-model="node_text"
                      style="height: calc(100vh - 696upx);"/>
          </view>
          <view v-if="!is_buy" class="flex-direction justify-center align-center"
                style="width: 100%; padding: 130upx 0;">
            <view class="flex justify-center">
              <image src="/static/icon/detail/lock@2x.png" style="width: 76upx; height: 92upx;"></image>
            </view>
            <view style="font-size: 28upx; color: #999999; text-align: center; margin: 22upx 0; padding: 0 30%;">
              此课程属于收费课程 拜师购买后即可观看
            </view>
            <view class="flex justify-center" @click="pay_flag = true">
              <view class="flex align-center justify-center apprentice-btn">
                拜师学习
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="is_tab === 1" @click="!is_buy ? pay_flag = true : ''"
            :style="!is_buy ? 'background-color: #E52718;':'background-color: rgba(216,216,216,1);'"
            class="interaction flex align-center justify-center">我要拜师
      </view>
      <view v-if="is_tab === 1 && is_buy" style="background-color: rgba(216,216,216,1);"
            class="interaction flex align-center justify-center">已拜师
      </view>
      <view v-if="is_tab === 2" @click="is_buy ? comment_flag = true : ''"
            :style="is_buy ?'background-color: #E52718;':'background-color: rgba(216,216,216,1);'"
            class="interaction flex align-center justify-center">互动
      </view>
      <view v-if="is_tab === 3" @click="!is_buy ?  '' : handleTextSave()"
            :style="is_buy ?'background-color: #E52718;':'background-color: rgba(216,216,216,1);'"
            class="interaction flex align-center justify-center">保存
      </view>
    </view>
    <!--支付框-->
    <view class="cu-modal bottom-modal" :class="pay_flag?'show':''" @click="pay_flag = false"
          @touchmove.stop.prevent="">
      <view class="cu-dialog" style="background-color: white; border-radius: 10upx 10upx 0 0;" @click.stop="">
        <view class="cu-bar justify-center" style="margin-bottom: 8%;">
          <view style="font-weight: bold; color: #333333; font-size: 26upx;">选择支付方式</view>
        </view>
        <view class="flex" style="padding: 0 40upx;">
          <radio-group style="width: 100%;" @change="handleChangeRadioChange">
            <view v-for="(item, index) in pay_type_list" style="margin-bottom: 8%;">
              <view class="flex justify-between align-center" style="width: 100%; margin-bottom: 32upx;">
                <view class="flex">
                  <image :src="item.img" style="width: 44upx; height: 44upx; margin-right: 10upx;"></image>
                  <view style="font-size: 26upx; color: #333333;">{{ item.name }}</view>
                </view>
                <radio class='radio' :value="index" :checked="pay_type === index"/>
              </view>
            </view>
          </radio-group>
        </view>
        <view class="flex justify-center align-center"
              @click="handleToPay(video_tutorial.course && video_tutorial.course.id, video_tutorial.course && video_tutorial.course.sale_price)"
              style="height: 98upx; background-color: #E52718; font-size: 28upx; color: white;">
          立即支付 <span
            style="font-size: 20upx;">（合计：¥{{ video_tutorial.course && video_tutorial.course.sale_price }}）</span>
        </view>
        <!--        <view class="flex justify-between align-center"-->
        <!--              style="width: 100%; height: 98upx;border-top: 2upx solid #F8F8F8;padding: 0 60upx;">-->
        <!--          <view style="font-size: 32upx; color: #333333; font-weight: bold;">¥{{video_tutorial.course && video_tutorial.course.sale_price }}</view>-->
        <!--          <view class="flex justify-center align-center" @click="handleToPay(video_tutorial.course && video_tutorial.course.id, video_tutorial.course && video_tutorial.course.sale_price)"-->
        <!--                style="width: 358upx; height: 70upx; font-size: 26upx; background-color: #E52718; color: white; border-radius: 40upx;">-->
        <!--            立即支付-->
        <!--          </view>-->
        <!--        </view>-->
      </view>
    </view>
    <!--评论框-->
    <publishCommentDialog :comment_flag="comment_flag" :type="'evaluate'"
                          @handleCloseCommentBox="handleCloseEvaluateBox"
                          @handlePublishComment="handlePublishEvaluate"></publishCommentDialog>
  </view>
</template>

<script>
import {videoTutorial_getById, viewingRecord_viewingRecord} from "api/tutorials/tutorials";
import {evaluate_getListByCon, evaluate_giveEvaluate} from "api/comment/comment";
import {orders_payOrder, pay_aliPayOrders} from "api/pay/pay";
import publishCommentDialog from "components/publish-comment-dialog/publish-comment-dialog";
import {getQiniuToken} from "utils/wxUtil";


export default {
  components: {
    publishCommentDialog
  },
  data() {
    return {
      tab_list: ['目录', '', '互动', '笔记',], //导航列表
      video_tutorial: {}, //视频详情
      is_tab: 0, //选中tab
      chapter_list: [], //章节列表
      master_information: {}, //师父信息
      evaluate_list: [],// 评价数据
      comment_flag: false, //评价框标识
      first_level: -1, //一级标题
      is_look: false, //能否观看
      is_buy: false, //是否购买
      show_flag: false,
      is_play: false, //是否当前播放
      node_text: '', //笔记
      video_tutorial_id: '', //视频id
      video_schedule: '', //视频时长
      video_index: '', //视频标识
      video_name: '', //视频名称
      pay_type_list: [
        {
          name: '微信支付',
          img: '/static/icon/detail/weixin@2x.png'
        },
        {
          name: '支付宝支付',
          img: '/static/icon/detail/zhifubao@2x.png'
        }
      ], //支付方式列表
      pay_flag: false,// 支付框
      pay_type: 0, //支付类型
      last_view_time: 0, //视频进度
      save_status: false, //保存状态
    }
  },
  onShow() {
    let page = getCurrentPages();//获取应用页面栈
    let currentPage = page[page.length - 1];//获取当前页面信息
    this.video_tutorial_id = currentPage.options.video_tutorial_id;
    this.video_name = currentPage.options.video_name;
    uni.setNavigationBarTitle({
      title: this.video_name
    });
    this.pageInit();
    this.getEvaluationData();
    getQiniuToken();
  },
  methods: {
    pageInit() {
      videoTutorial_getById({video_tutorial_id: this.video_tutorial_id}).then(res => {
        this.is_buy = res.data.is_buy;
        if (res.data && res.data.video_tutorial) {
          res.data.video_tutorial.video_catalogs.forEach(item => {
            item.is_show = false;
          })
          if (res.data.video_tutorial.course) {
            if (res.data.video_tutorial.course.information_html) {
              res.data.video_tutorial.course.information_html = res.data.video_tutorial.course.information_html.replace(new RegExp(' style="" ', "g"), '');
              res.data.video_tutorial.course.information_html = res.data.video_tutorial.course.information_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
            }
            if (res.data.video_tutorial.course.service_html) {
              res.data.video_tutorial.course.service_html = res.data.video_tutorial.course.service_html.replace(new RegExp(' style="" ', "g"), '');
              res.data.video_tutorial.course.service_html = res.data.video_tutorial.course.service_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
            }
            this.master_information = res.data.video_tutorial.course;
          }
          this.video_tutorial = res.data.video_tutorial;
          this.chapter_list = res.data.video_tutorial.video_catalogs;
          this.node_text = res.data.video_tutorial.viewing_record && res.data.video_tutorial.viewing_record.note;
          this.show_flag = true;
          let time = this.video_tutorial.viewing_record && this.video_tutorial.viewing_record.last_view_time;
          this.video_schedule = time;
          let hour = time.split(':')[0];
          let min = time.split(':')[1];
          let sec = time.split(':')[2];
          this.last_view_time = Number(hour * 3600) + Number(min * 60) + Number(sec);
        }
      })
    },
    //记录视频
    viewingRecord(video_tutorial_id, last_view_time, note, type) {
      if (!last_view_time) {
        last_view_time = '00:00:00'
      }
      viewingRecord_viewingRecord({
        video_id: video_tutorial_id,
        last_view_time,
        note,
        f_table: this.video_tutorial.f_table,
        f_id: this.video_tutorial.f_id,
        type: this.video_tutorial.type
      }).then(res => {
        if (type === 'save') {
          this.save_status = true;
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 500)
        }
        if(type !== 'change'){
          uni.showToast({
            title: '保存成功'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //播放视频
    handlePlayVideo() {
      let play_video = uni.createVideoContext('myVideo', this);
      play_video.play();
      this.is_look = true;
    },
    //视频播放结束
    playEnd(){
      this.video_schedule = '00:00:00';
      this.show_flag = false;
      this.viewingRecord(this.video_tutorial_id, this.video_schedule, this.node_text, 'change')
      this.pageInit();
    },
    //获取评价数据
    getEvaluationData() {
      evaluate_getListByCon({f_table: 'video', f_id: this.video_tutorial_id}).then(res => {
        this.evaluate_list = res.data.data;
      })
    },
    //发布互动
    handlePublishEvaluate(evaluate) {
      this.comment_flag = false;
      let evaluate_data = {
        f_table: 'video',
        f_id: this.video_tutorial_id,
        score: 0,
        content_html: evaluate.content_html,
        imgs: evaluate.imgs
      }
      evaluate_giveEvaluate(evaluate_data).then(res => {
        this.getEvaluationData();
      })
    },
    //选择支付方式
    handleChangeRadioChange(e) {
      this.pay_type = e.target.value;
    },
    /**
     * @name 去支付
     * @param {Object} article_id 教程id
     * @param {Object} fee 金额
     */
    handleToPay(article_id, fee) {
      let data = {
        f_table: 'course',
        f_id: article_id,
        fee: fee
      }
      let user_id = uni.getStorageSync('user_info').id
      switch (this.pay_type) {
        case 0:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=course&f_id=${article_id}&fee=${fee}&user_id=${user_id}`);
          // orders_payOrder(data).then(res => {
          //   uni.requestPayment({
          //     provider: 'wxpay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       this.pageInit();
          //       console.log('success:' + JSON.stringify(res));
          //     },
          //     fail: (err)=> {
          //       this.pay_flag = false;
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //     }
          //   })
          // }).catch(err => {
          //   console.log(err)
          // })
          break;
        case 1:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=course&f_id=${article_id}&fee=${fee}&user_id=${user_id}&type=1`);
          // pay_aliPayOrders(data).then(res => {
          //   uni.requestPayment({
          //     provider: 'alipay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       this.pageInit();
          //       console.log('success:' + JSON.stringify(res));
          //     },
          //     fail: (err)=> {
          //       this.pay_flag = false;
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err => {
          //   console.log(err)
          // })
          break;
      }
    },
    //预览图片
    handlePreviewImgs(img, imgs_arr) {
      uni.previewImage({
        urls: imgs_arr,
        current: img
      });
    },
    handleCloseEvaluateBox() {
      this.comment_flag = false;
    },
    //选择tab
    handleChangeTab(index) {
      this.is_tab = index
    },
    //获取视频进度
    getVideoSchedule(e) {
      this.video_schedule = e.detail.currentTime;
    },
    /**
     * @name 一级目录选择
     * @param {Object} index 索引值
     * @param video_id 视频id
     */
    handleChangeFirstLevel(index, video_id) {
      let find = this.chapter_list.find(x=> x.id === video_id);
      find.is_show = !find.is_show
      let find_index = this.chapter_list.findIndex(x=> x.id === video_id)
      this.$set(this.chapter_list, find_index, find)
    },
    //选择播放内容
    handleChangeContent(id, index, video_name) {
      this.is_look = false;
      this.viewingRecord(this.video_tutorial_id, this.video_schedule, this.node_text, 'change')
      this.show_flag = false;
      uni.setNavigationBarTitle({
        title: video_name
      });
      let play_video = uni.createVideoContext('myVideo', this);
      play_video.pause();
      this.video_tutorial = {};
      this.video_index = index;
      this.video_tutorial_id = id;
      this.pageInit();
      this.getEvaluationData();
    },
    //笔记保存
    handleTextSave() {
      this.viewingRecord(this.video_tutorial_id, this.video_schedule, this.node_text)
    },
    //保存
    handleSave() {
      let play_video = uni.createVideoContext('myVideo', this);
      play_video.pause();
      uni.showModal({
        title: '提示',
        content: '是否保存视频进度',
        success: (res)=> {
          if (res.confirm) {
            this.viewingRecord(this.video_tutorial_id, this.video_schedule, this.node_text, 'save')
          } else if (res.cancel) {
            this.save_status = true;
            uni.showToast({
              title: '您已取消保存',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              });
            }, 500)
          }
        }
      });
    },
    //导航栏左侧按钮
    onBackPress() {
      if (!this.save_status && this.is_buy) {
        this.handleSave();
        return true
      }
      // this.handleSave(1);
      // return true
    },
  }
}
</script>

<style scoped lang="scss">
/deep/ .nav .cu-item {
  margin: 0 40upx;
  padding: 0;
}

/deep/ .uni-radio-input-checked {
  border-color: #E52718 !important;
}

/deep/ uni-radio .uni-radio-input {
  width: 34upx;
  height: 34upx;
  background-color: #ffffff !important;
}

/deep/ uni-radio .uni-radio-input::after {
  background-color: #E52718 !important;
  border: 6upx solid #E52718 !important;
  border-color: #E52718 !important;
  left: -1 !important;
}

.content-box {
  padding: 30upx 20upx 0 20upx;
  background-color: #F8F8F8;
  min-height: calc(100vh - 696upx);
}

.select-cur {
  color: #E52718;
}

.apprentice-btn {
  width: 358upx;
  height: 70upx;
  background-color: #E52718;
  color: white;
  font-size: 26upx;
  border-radius: 40upx;
}

.apprentice {
  width: 200upx;
  height: 60upx;
  background-color: #E52718;
  border-radius: 40upx;
  margin-top: 20upx;
}

.look-no {
  margin-top: 144upx;
  width: 100%;
  height: 190upx;
  position: absolute;
  top: 0;
}

.look-no-text {
  width: 252upx;
  height: 80upx;
  margin-left: 256upx;
  font-size: 28upx;
  color: #FFFFFF;
}

.look-no-buttom {
  width: 358upx;
  height: 70upx;
  border-radius: 40upx;
  margin: 40upx 0 0 204upx;
  background-color: rgba(229, 39, 24, 1);
  color: #FFFFFF;
}

.tab {
  height: 90upx;
  padding: 30upx 98upx 0 98upx;
}

.tab-text {
  font-size: 28upx;
  font-weight: 700;
}

.content {
  //padding: 30upx 20upx 0 20upx;
  background-color: rgba(248, 248, 248, 1);
}

.chapter {
  padding: 15upx 0;
  font-size: 26upx;
  font-weight: 700;
}

.second_level {
  font-size: 26upx;
  padding: 20upx 0 14upx 0;
  color: rgba(102, 102, 102, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.record-4 {
  height: calc(100vh - 696upx);
  overflow: scroll;
  padding: 30upx 20upx 0 20upx;
  background-color: #F8F8F8;
}

.evaluate-content {
  padding: 20upx 0 22upx 0;
}

.evaluate-content-right {
  flex: 1;
  padding-left: 12upx;
}

.evaluate-right-top {

}

.evaluate-content-img {
  margin-top: 10upx;
}

.interaction {
  width: 100%;
  height: 98upx;
  font-size: 28upx;
  color: #FFFFFF;
  background-color: rgba(229, 39, 24, 1);
  position: fixed;
  bottom: 0;
}

.node {
  padding: 34upx 40upx 40upx 20upx;
  background-color: #FFFFFF;
}

.node-text {
  height: 474upx;
  font-size: 26upx;
  color: rgba(102, 102, 102, 1);
}

.node-no {
  height: 548upx;
  padding: 134upx 0 110upx 66upx;
}

.no-img {
  width: 76upx;
  height: 92upx;
}

.no-text {
  width: 252upx;
  height: 80upx;
  font-size: 28upx;
  margin: 22upx 0 40upx 0;
  color: rgba(153, 153, 153, 1);
}

.no-bottom {
  width: 358 rpx;
  height: 70upx;
  font-size: 26upx;
  border-radius: 40upx;
  background-color: rgba(229, 39, 24, 1);
  color: #FFFFFF;
}
</style>
